<template>
    <div>
        <div class="photo" :style="onlyone">
            <!-- 3 5 7  -->
            <div :style="topOddStyle" v-if="topOddArr.length" class="common_img">
                <div v-for="item in topOddArr"
                    :style="urlArr.length === 7 || urlArr.length === 8 ? isSevenStyle : countImgWidth">
                    <el-image style="width: 100%; height: 100%;" :src="item" :fit="fit" />
                </div>
            </div>

            <!-- 其他 -->
            <div :style="botevenStyle" class="common_img">
                <div v-for="item in botevenArr" :style="countImgWidth">
                    <el-image style="width: 100%; height: 100%;" :src="item" :fit="fit" />
                </div>
            </div>


        </div>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const topOddArr = ref([])
const botevenArr = ref([])

const topOddStyle = ref({})
const botevenStyle = ref({})
const isSevenStyle = ref({})

const urlArr = ref([
    'https://shopimg.cloudvast.com/shopimg/aef6c04c-e849-493d-ba55-2f72c9c51854/1wk7GvCs5o.jpg',
    'https://shopimg.cloudvast.com/shopimg/aef6c04c-e849-493d-ba55-2f72c9c51854/1wk7GvCs5o.jpg',
    'https://shopimg.cloudvast.com/shopimg/aef6c04c-e849-493d-ba55-2f72c9c51854/1wk7GvCs5o.jpg',
    'https://shopimg.cloudvast.com/shopimg/aef6c04c-e849-493d-ba55-2f72c9c51854/1wk7GvCs5o.jpg',
    'https://shopimg.cloudvast.com/shopimg/aef6c04c-e849-493d-ba55-2f72c9c51854/1wk7GvCs5o.jpg',
    'https://shopimg.cloudvast.com/shopimg/aef6c04c-e849-493d-ba55-2f72c9c51854/1wk7GvCs5o.jpg',
    'https://shopimg.cloudvast.com/shopimg/aef6c04c-e849-493d-ba55-2f72c9c51854/1wk7GvCs5o.jpg',
    'https://shopimg.cloudvast.com/shopimg/aef6c04c-e849-493d-ba55-2f72c9c51854/1wk7GvCs5o.jpg',
    'https://shopimg.cloudvast.com/shopimg/aef6c04c-e849-493d-ba55-2f72c9c51854/1wk7GvCs5o.jpg'
])




// 计算出不同的图片的个数排列方式
const onlyone = () => {
    if (urlArr.value.length === 1) {
        botevenStyle.value = { 'justify-content': 'center', 'align-items': 'center' }
    } else if (urlArr.value.length === 2) {
        botevenStyle.value = { 'justify-content': 'space-between', 'align-items': 'center' }
    } else if (urlArr.value.length === 3) {
        topOddStyle.value = { 'justify-content': 'center', 'align-items': 'center', 'height': '50%' }
        botevenStyle.value = { 'justify-content': 'space-between', 'align-items': 'center', 'height': '50%' }
    } else if (urlArr.value.length === 4) {
        botevenStyle.value = { 'flex-wrap': 'wrap', 'justify-content': 'space-between', 'align-items': 'center', 'height': '100%' }
    }
    else if (urlArr.value.length === 5) {
        topOddStyle.value = { 'justify-content': 'center', 'align-items': 'end', 'height': '50%' }
        botevenStyle.value = { 'justify-content': 'space-between', 'align-items': 'flex-start', 'height': '50%' }
    }
    else if (urlArr.value.length === 6) {
        botevenStyle.value = { 'flex-wrap': 'wrap', 'justify-content': 'space-between', 'align-items': 'center', 'height': '100%' }
    }
    else if (urlArr.value.length === 7) {
        topOddStyle.value = { 'justify-content': 'center', 'align-items': 'end', 'height': '30%' }
        botevenStyle.value = { 'flex-wrap': 'wrap', 'justify-content': 'space-between', 'align-items': 'center', 'height': '70%' }
    }
    else if (urlArr.value.length === 8) {
        topOddStyle.value = { 'justify-content': 'center', 'align-items': 'end', 'height': '30%' }
        botevenStyle.value = { 'flex-wrap': 'wrap', 'justify-content': 'space-between', 'align-items': 'center', 'height': '70%' }
    }
    else if (urlArr.value.length === 9) {
        botevenStyle.value = { 'flex-wrap': 'wrap', 'justify-content': 'space-between', 'align-items': 'center', 'height': '100%' }
    }
}

//计算每个图片的宽度高度 

const countImgWidth = computed(() => {
    let countResult;
    if (urlArr.value.length === 1) {
        countResult = { 'width': '90%', 'height': '90%' }
    } else if (urlArr.value.length === 2) {
        countResult = { 'width': '45%', 'height': '45%' }
    } else if (urlArr.value.length === 3) {
        countResult = { 'width': '38%', 'height': '75%' }
    }
    else if (urlArr.value.length === 4) {
        countResult = { 'width': '45%', 'height': '45%' }
    }
    else if (urlArr.value.length === 5) {
        countResult = { 'width': '35%', 'height': '70%' }
    }
    else if (urlArr.value.length === 6) {
        countResult = { 'width': '30%', 'height': '30%' }
    }
    else if (urlArr.value.length === 7) {
        countResult = { 'width': '30%', 'height': '40%' }
        isSevenStyle.value = { 'width': '30%', 'height': '82%' }
    }
    else if (urlArr.value.length === 8) {
        countResult = { 'width': '30%', 'height': '40%' }
        isSevenStyle.value = { 'width': '30%', 'height': '82%' }
    }
    else if (urlArr.value.length === 9) {
        countResult = { 'width': '30%', 'height': '30%' }
    }
    return countResult
})


//截取 3 5 7 个图片的数组
const topOddList = () => {
    if (urlArr.value.length < 3) {
        botevenArr.value = urlArr.value
    } else if (urlArr.value.length === 3) {
        topOddArr.value = urlArr.value.slice(0, 1)
        botevenArr.value = urlArr.value.slice(1, 3)
    } else if (urlArr.value.length === 4) {
        botevenArr.value = urlArr.value
    } else if (urlArr.value.length === 5) {
        topOddArr.value = urlArr.value.slice(0, 2)
        botevenArr.value = urlArr.value.slice(2, 5)
    }
    else if (urlArr.value.length === 6) {
        botevenArr.value = urlArr.value
    }
    else if (urlArr.value.length === 7) {
        topOddArr.value = urlArr.value.slice(0, 1)
        botevenArr.value = urlArr.value.slice(1, 7)
    }
    else if (urlArr.value.length === 8) {
        topOddArr.value = urlArr.value.slice(0, 2)
        botevenArr.value = urlArr.value.slice(2, 8)
    }
    else {
        botevenArr.value = urlArr.value
    }
}
topOddList()
onlyone()

</script>

<style lang="scss" scoped>
.photo {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin: auto;
    display: flex;
    flex-wrap: wrap;

}

.common_img {
    width: 100%;
    // height: 100%;
    display: flex;
}
</style>